<template>
	<view class="container">
		<view class="header nav-header" :style="{backgroundImage:'url('+tui.website+'static/home/img/topbg4.png)',paddingTop:top+'px'}">
			<view class="page-title" style="color: #FFF;">
				<view class="back-btn">
					<tui-icon name="arrowleft" color="#fff" @click="back"></tui-icon>
				</view>
				<text>业务排名</text>
			</view>
		</view>
		<view class="" :style="{marginTop:(49 + top)+'px'}">
			<view class="tabs1">
				<tui-tabs :tabs="tabs1" blod sliderBgColor="#fd2a3d"  selectedColor="#000" itemWidth="50%" :size="32" :currentTab="currentTab" @change="changeType"></tui-tabs>
			</view>
			<view class="tabs2">
				<block v-for="(item,index) in days" :key="item.name">
					<tui-tag margin="20upx 10upx" padding="14rpx 24rpx" :type="param.d == item.val ?'danger':'gray'" @click="changeDays(item.val)">{{item.name}}</tui-tag>
				</block>
			</view>
		</view>
		<view class="ranking-list">
			<tui-list-view unlined="all" title="排行榜" :size="32" bold="700">
				<tui-list-cell :lineLeft="false" padding="30rpx 0">
					<view class="tui-item-box list-header">
						<view class="a">排名</view>
						<view class="b">姓名</view>
						<view class="c">{{param.type==1?'新增客户':'销售业绩'}}</view>
					</view>
				</tui-list-cell>
				<block v-for="(item,index) in rankings">
				<tui-list-cell :lineLeft="false"  :size="30" padding="30rpx 0">
					<view class="tui-item-box">
							<view class="a">{{index+1}}</view>
							<view class="b">{{item.nickname}}</view>
							<view class="c">{{item.nums}}</view>
					</view>
				</tui-list-cell>
				</block>
			</tui-list-view>
		</view>
		
		
		<!--内容部分-->
	</view>
</template>
<script>
	export default {
		onLoad() {
			let obj = {};
			// #ifdef MP-WEIXIN
			obj = wx.getMenuButtonBoundingClientRect();
			// #endif
			// #ifdef MP-BAIDU
			obj = swan.getMenuButtonBoundingClientRect();
			// #endif
			// #ifdef MP-ALIPAY
			my.hideAddToDesktopMenu();
			// #endif
			uni.getSystemInfo({
				success: (res) => {
					this.width = obj.left || res.windowWidth;
					this.height = obj.top ? (obj.top + obj.height + 8) : (res.statusBarHeight + 44);
					this.top = obj.top ? (obj.top + (obj.height - 32) / 2) : (res.statusBarHeight + 6);
					// this.scrollH = res.windowWidth * 0.6
				}
			})
		},
		onShow(){
			this.getList();
		},
		data() {
			return {
				param:{
					type:1,
					d:1,
				},
				currentTab:0,
				tabs1:[
					{name:"新增客户",val:1},
					{name:"销售业绩",val:2},
				],
				days:[
					{val:1,name:"今天"},
					{val:2,name:"昨天"},
					{val:3,name:"本周"},
					{val:4,name:"上周"},
					{val:5,name:"本月"},
					{val:6,name:"上月"},
				],
				rankings:[
					{id:1,nickname:'少时诵诗 所',nums:'1000.00'},
					{id:2,nickname:'少所',nums:'1000.00'},
					{id:3,nickname:'少时 所所',nums:'1000.00'},
					{id:4,nickname:'少时诵 ',nums:'1000.00'},
					{id:5,nickname:' 诵诗 ',nums:'1000.00'},
				]
			}
		},
		methods: {
			getList: function() {
				this.tui.get('user/api/rankings',this.param).then(res=>{
					this.rankings =res.data;
				});
			},
			changeDays(e){
				this.param.d = e;
				this.getList();
			},
			changeType(e){
				this.currentTab = e.index;
				this.param.type = e.index +1;
				this.getList();
			},
			back(){
				uni.navigateBack({
					
				})
			}
		}
	}
</script>

<style>
	.container {
		padding-bottom: env(safe-area-inset-bottom);
	}
	
	.tabs1{display: flex;padding: 20upx 0;background-color: #FFF;}
	.tabs2{display: flex;padding-bottom:20upx;background-color: #FFF;}
	.tabs2 .tui-danger{
		background-color: rgb(253,42,61)!important;
	}
	.tui-item-box {
		width: 100%;
		display: flex;
		align-items:;
	}
	.tui-item-box>view.a{
		width: 20%;
		text-align: center;
	}.tui-item-box>view.b{
		width: 50%;
		text-align: center;
	}.tui-item-box>view.c{
		width: 30%;
		text-align: center;
	}
	.tui-list-cell_name {
		padding-left: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.tui-flex {
		display: flex;
		align-items: center;
	}
	.ranking-list .ranking-title{
		font-size: 38rpx;
		color: #333333;
		font-weight: 700;
	}
	.list-header{font-size: 30rpx;color: #999;}
	.ranking-list{margin: 30upx;border-radius: 20upx;padding: 30upx;background-color: #FFF;}
</style>
